/*----------------------------------------*\
  FOOTER
\*----------------------------------------*/

.footer-information {
  @apply flex flex-col;
  @apply lg:grid lg:grid-cols-3 lg:gap-16;
  @apply xl:grid-cols-4;
  @apply container--py;
}

.footer-navigation {
  @apply flex;
  @apply py-3;
  @apply space-x-2 sm:space-x-4;
  @apply text--xs;
}

.footer__link {
  @apply inline-flex items-center;
  @apply py-2;
  @apply text-white hover:text-text-300 focus:text-text-300;
  @apply cursor-pointer;

  .footer-information__icon {
    @apply inline-block;
    @apply mr-1;
    @apply w-[1.4em] h-full;
    @apply stroke-current;
  }
}

.footer-information__link--icon-right {
  @apply flex-row-reverse;

  .footer-information__icon {
    @apply relative ml-[0.2em] left-[0.1em];
  }
}

.footer-information__entry {
  @apply mb-16 lg:mb-0;
  @apply text-white;

  &:last-child {
    @apply mb-0;
  }

  h3 {
    @apply text--xl;
    @apply mb-6 lg:mb-10;
  }

  p {
    @apply mb-3 xl:mb-4;

    &:last-child {
      @apply mb-0;
    }
  }

  &.footer-information__entry--big {
    @apply xl:col-span-2;
  }
}

.footer-information__social {
  @apply mb-6 lg:mb-8;

  @apply -mt-2; /* to compensate the paddings of the links and get the same vertical alignment as the text on the first-column */

  .footer__link {
    @apply mr-5;
  }

  svg {
    stroke-width: 0.1px;
  }
}

.footer-information__links {
  @apply flex flex-col;
  @apply sm:flex-row sm:gap-16;
  @apply lg:flex-col lg:gap-0;
  @apply xl:flex-row xl:gap-16;

  @apply -mt-4; /* to compensate the paddings of the links and get the same vertical alignment as the text on the first-column */

  .footer-information__links-column {
    @apply flex-1;
  }

  .footer__link {
    @apply w-full;
    @apply flex justify-between;
    @apply py-4 px-2;
    @apply border-b border-secondary-300;
    @apply hover:bg-secondary-700 hover:text-white;

    .footer-information__icon {
      @apply h-6;
    }
  }
}
